What is @material/feature-targeting?
@material/feature-targeting is a utility package from Material Components for the web (MDC Web) that provides a way to target specific CSS features. It allows developers to write CSS that is conditionally applied based on the presence of certain features, such as CSS variables or specific browser capabilities.
What are @material/feature-targeting's main functionalities?
CSS Variable Support
This feature allows you to write CSS rules that are only applied if the browser supports CSS variables. The mixin `supports-css-variables` checks for CSS variable support and applies the enclosed styles if the feature is available.
/* Import the feature targeting mixins */
@use '@material/feature-targeting/feature-targeting';
/* Define a CSS rule that only applies if CSS variables are supported */
@include feature-targeting.supports-css-variables() {
.my-class {
color: var(--my-color, black);
}
}
Custom Property Fallbacks
This feature allows you to provide fallback styles for browsers that do not support CSS variables. The mixin `supports-css-variables` is used to conditionally apply the CSS variable-based styles, while the fallback styles are applied unconditionally.
/* Import the feature targeting mixins */
@use '@material/feature-targeting/feature-targeting';
/* Define a CSS rule with a fallback for browsers that do not support CSS variables */
.my-class {
color: black;
@include feature-targeting.supports-css-variables() {
color: var(--my-color, black);
}
}
Other packages similar to @material/feature-targeting
postcss-preset-env
postcss-preset-env is a PostCSS plugin that allows you to use future CSS features today. It includes polyfills for CSS features that are not yet widely supported, similar to how @material/feature-targeting provides conditional CSS based on feature support. However, postcss-preset-env is more comprehensive and supports a wider range of CSS features.
modernizr
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. It allows you to conditionally apply styles and scripts based on the presence of specific features, similar to @material/feature-targeting. Modernizr provides a more extensive set of feature detections and is not limited to CSS features.